<template>
  <div class="home-content">
      <!-- 首页上方背景块 -->
      <div class="home-top-background"></div>
      <!-- 搜索框已经设置登录 -->
      <div class="home-top-content">
        <span>设置</span>
        <input type="test" class="home-search">
        <div v-if="this.$store.state.username === null" >
          <router-link to="/login"><span style="color: #ffffff">登录</span></router-link>
        </div>
        <template v-else>
          <span>{{this.$store.state.username}}</span>
        </template>
      </div>
      <!-- 快捷链接 -->
      <div class="grid-content">
        <ul>
          <!-- 循环 -->
          <li v-for="(i,index) in gridList" :key="index">
              <div>
                <span :style="{background:i.gridColor}" :class="i.gridIcon"></span>
                <p>{{ i.gridName }}</p>
              </div>
          </li>
        </ul>
      </div>
      <!-- compontents里面注册的是什么，就用什么标签 -->
      <Slide :slideList="slideList"></Slide>

       <div class="p">
        <ul class="recommend-content">
          <router-link :to="'/recommendInfo/' + item.id" v-for="item in recommendList" :key="item.id" tag="li">
            <div class="recommend-top">
              <img :src="item.url" alt="">
            </div>
            <p class="recommend-details ">{{item.getrecommendtext}}</p>
            <div  class="info-body-text">
            <div class="reconmmend-bottom">
              <h5 class="recommend-price">{{item.price}}</h5>
              <span class="recommend-look">找相似</span>
            </div>
            </div>
          </router-link>
        </ul>
        </div>
  </div>
</template>

<script>
import Slide from "../Share/Slide.vue"      //引入

export default {
    data(){
      return{
        gridList:[
          {gridName:"美食",gridIcon:"glyphicon glyphicon-heart",gridUrl:"",gridColor:"rgb(255,191,6)"},
          {gridName:"商超便利",gridIcon:"glyphicon glyphicon-home",gridUrl:"",gridColor:"rgb(253,128,0)"},
          {gridName:"水果",gridIcon:"glyphicon glyphicon-apple",gridUrl:"",gridColor:"rgb(164,88,56)"},
          {gridName:"跑腿代购",gridIcon:"glyphicon glyphicon-knight",gridUrl:"",gridColor:"rgb(1,194,149)"},
          {gridName:"甜品",gridIcon:"glyphicon glyphicon-ice-lolly-tasted",gridUrl:"",gridColor:"rgb(178,34,34)"},
          {gridName:"晚餐",gridIcon:"glyphicon glyphicon-fire",gridUrl:"",gridColor:"rgb(0,214,0)"},
          {gridName:"全球美食",gridIcon:"glyphicon glyphicon-glass",gridUrl:"",gridColor:"rgb(255,79,144)"},
          {gridName:"出行",gridIcon:"glyphicon glyphicon-plane",gridUrl:"",gridColor:"rgb(255,180,0)"},
          {gridName:"维修",gridIcon:"glyphicon glyphicon-wrench",gridUrl:"",gridColor:"rgb(9,176,248)"},
          {gridName:"送药上门",gridIcon:"glyphicon glyphicon-briefcase",gridUrl:"",gridColor:"rgb(64,224,208)"},
        ],

        slideList:[
          require("../../assets/imgs/1.jpg"),
          require("../../assets/imgs/2.jpg"),
          require("../../assets/imgs/3.jpg"),
          require("../../assets/imgs/4.jpg"),
          require("../../assets/imgs/5.jpg")
        ],
        recommendList:[]
      }
    },
    methods:{
      getRecommendData(){
        this.$axios.post("/getRecommend").then( req => {

          this.recommendList = req.data.data
          console.log(req)
        })
      }
    },
    created(){
      this.getRecommendData();
    },
    components:{        //注册
      Slide
    }
}
</script>

<!-- scoped作用：告诉浏览器 style里面所有的样式只用于Home.vue里面 -->
<style lang="less" scoped>
    .home-content{
      padding-top: 45px;
    .home-top-background{
        width: 100%;
        height:100px;
        background: linear-gradient(0deg,#f1503b,#c82519 50%);
        border-bottom-left-radius:30px;
        border-bottom-right-radius:30px;
        position: absolute;
        z-index: 1;
      }
    .home-top-content{
      position: fixed;
      top: 0;
      z-index: 1000;
      width: 100%;
      display: flex;
      justify-content: space-around;
      align-items: center;
      background: #e43130;
      padding: 10px;
      color: #fff;
      .home-search{
        width: 70%;
        border: 1px solid #000;
        height: 30px;
        border-radius: 20px;
      }
    }
    .grid-content{
      position: relative;
      z-index: 100;
      background: #fff;
      width: 92%;
      margin: 15px 4%;
      border-radius: 10px;
      background: #e4e4e4;
      ul{
        display: flex;
        flex-wrap: wrap;
        li{
          width: 20%;
          max-width: 20%;
          min-width: 20%;
          display: flex;
          justify-content: center;
          padding: 8px 0;
          div{
            text-align: center;
            span{
                font-size: 28px;
                color: #fff;
                width: 40px;
                line-height: 40px;
                border-radius: 10px;
            }
          }
        }
      }
    }
  }

  .p{
    margin-top: 25px;
  }

  .recommend-content{
    display: flex;
    flex-wrap: wrap;
    justify-items: center;
    justify-content: center;
    padding-bottom: 40px;
    margin-top: 10px;
    li{
      width: 48%;
      flex-direction: column;
      .recommend-top{
        img{
          width: 176px;
          height: 176px;
        }
      }
      .recommend-details{
        width: 98%;
        height: 35px;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        padding: 0 5px;
      }
      .info-body-text{
        padding: 0 5px;
        div{
            display: flex;
            justify-content: space-between;
            h5{
                color: red;
                font-weight: bold;
            }
            span{

                height: 20px;
                padding: 3px;
            }
        }
    }
      .recommend-bottom{
        display: flex;
        height: 35px;
        justify-content: space-between;
        padding: 0 4px;
        align-items: center;
        .recommend-price{
          font-weight: bold;
          color: red;
        }
        .recommend-see{
          border: 5px solid #000;
          height: 18px;
          padding: 2px;
          text-align: center;
        }
      }
    }
  }

</style>
